<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex</title>
    <style>
      .container {
        width: 300px;
        border: 1px solid #000;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
      }
      .item1 {
        width: 150px;
        height: 100px;
        flex-shrink: 1;
        background-color: red;
      }
      .item2 {
        width: 200px;
        height: 100px;
        flex-shrink: 2;
        background-color: yellow;
      }
      .item3 {
        width: 250px;
        height: 100px;
        flex-shrink: 3;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1"></div>
      <div class="item item2"></div>
      <div class="item item3"></div>
    </div>

    <div>
      溢出值： 150+200+250 - 300 = 300
      <br />
      <br />
      压缩总权重： sum = 150 * 1 + 200*2 + 250*3 = 1300
      <br />
      <br />
      item1的比例： 150*1 = 150
      <br />
      item2的比例： 200*2 = 400
      <br />
      item3的比例： 250*3 = 750
      <br />
      <br />

      item1的压缩率： 150*1 / sum = 150/1300 = 0.115384615384615
      <br />
      item2的压缩率： 200*2 / sum = 400/1300 = 0.307692307692308
      <br />
      item3的压缩率： 250*3 / sum = 750/1300 = 0.576923076923077
      <br />
      <br />

      item1的压缩值： 300 * 0.115384615384615 = 34.6153846153845
      <br />
      item2的压缩值： 300 * 0.307692307692308 = 92.3076923076924
      <br />
      item3的压缩值： 300 * 0.576923076923077 = 173.076923076923077
      <br />
      <br />

      item1最终的值是 150 - 34.6153846153845 = 115.3846153846155
      <br />
      item2最终的值是 200 - 92.3076923076924 = 107.6923076923076
      <br />
      item3最终的值是 250 - 173.076923076923077 = 76.923076923076923
      <br />
      <br />
    </div>
  </body>
</html>
